<template>
    <div class="personal-details" style="overflow:hidden">
        <div class="left" style="display:inline-block;margin-left:8%;vertical-align:middle">
            <div class="img" style="width:250px;height:250px">
                <img :src="this.form.formFields.avatarUrl" width="100%" height="100%">
            </div>
        </div>
        <div class="right" style="display:inline-block;vertical-align:middle">
            <component-form :data="form">
                <slot slot="dept">

                </slot>
                <template slot="gender">
                    <span v-if="form.formFields.gender==='0'">男</span>
                    <span v-if="form.formFields.gender==='1'">女</span>
                </template>
                <template slot="status">
                    <span v-if="form.formFields.status===1" style="color:#67C23A">正常</span>
                    <span v-if="form.formFields.status===2" style="color:red">锁定</span>
                </template>
            </component-form>
        </div>
    </div>
</template>
<script>
import { getPersonal } from '@/api/sys/personal'
export default {
    name:'personal-details',
    data () {
        return {
            form:{
                labelWidth:'100px',
                formFields:{
                    username:'',
                    phone: '',
                    nickName: '',
                    realName: '',
                    email:'',
                    nickName: '',
                    gender: '',
                    status: '',
                },
                formLabel:[
                    {prop: 'realName', title: '姓名', type: 'text'},
                    // {prop: 'deptId', title: '科室', type: 'slot',slot:'dept'},
                    // {prop: 'dutyName', title: '职务', type: 'text'},
                    {prop: 'phone', title: '电话', type: 'text'},
                    {prop: 'nickName', title: '昵称', type: 'text'},
                    {prop: 'gender', title: '性别', type: 'slot',slot:'gender'},
                    {prop: 'status', title: '状态', type: 'slot',slot:'status'},
                ]
            },
        }
    },
    created() {
        this.$nextTick(() => this.request(getPersonal,{},this,data => {
            this.form.formFields = data;
            this.form.formFields.password = '默认密码 123456789';
        },false));
    }
}
</script>
<style lang="css" scoped>

</style>